<template>
	<div class="crud-container flex-column pt-1 plr-1">
		<!-- <cl-tabs-card v-model="activeTab" :tabs="tabs" /> -->
		<div>
			<el-radio-group
				v-model="activeTab"
				v-for="(item, index) in tabs"
				:key="index"
			>
				<el-radio-button :label="item.name">{{ item.label }}</el-radio-button>
			</el-radio-group>
		</div>
		<cl-flex1 style="overflow: hidden">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<template v-for="tab in tabs">
						<component
							:key="tab.name"
							:is="tab.name + '-list'"
							:ref="tab.name"
							v-if="activeTab == tab.name"
						/>
					</template>
				</keep-alive>
			</transition>
		</cl-flex1>
	</div>
</template>
<script>
import AdvisoryList from "./components/advisory-list";
import RefundList from "./components/refund-list";
export default {
	name: "FinanceAppointment",
	components: {
		AdvisoryList,
		RefundList
	},
	data() {
		return {
			activeTab: "advisory",
			tabs: [
				{ label: "咨询", name: "advisory" },
				{ label: "退回", name: "refund" }
			]
		};
	},
	methods: {}
};
</script>
<style lang="scss" scoped>
.crud-container {
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
}
::v-deep {
	.el-tabs {
		position: relative;
		bottom: -1px;
		&__header {
			margin-bottom: 0;
		}
	}
	.title-module {
		margin-bottom: 0;
		&::-webkit-scrollbar {
			height: 6px;
		}
		&::-webkit-scrollbar-thumb {
			background-color: rgba(144, 147, 153, 0.3);
			border-radius: 5px;
		}
		&::-webkit-scrollbar-track {
			background: transparent;
		}
	}
}
</style>
